﻿function InitGmap3() {

    var markers = @(Html.Raw((Json.Encode(Model.Connection.MapMarkers))));
    var stationTags = @(Html.Raw((Json.Encode(Model.Connection.StationTags))));
    var trainTags = @(Html.Raw((Json.Encode(Model.Connection.TrainTags))));
    var stationsLegend = $('#stationsLegend');
    var trainsLegend = $('#trainsLegend');
    // center: [centerY, centerX], TERRAIN, SATELITE, ROADMAP
    // {action:'clear', name:'polyline', tag:'someId'}
    var i = 0;

    for(i = 0; i < stationTags.length; i++) {
        stationsLegend.append('<input id="chkSt' + i + '" type="checkbox" checked><label for="chkSt' + i + '">' + stationTags[i] + '</label><br />');
    }
    for(i = 0; i < trainTags.length; i++) {
        trainsLegend.append('<input id="chkTr' + i + '" type="checkbox" checked><label for="chkTr' + i + '">' + trainTags[i] + '</label><br />');
    }
        
    $('#map').gmap3(
        {
            action: 'init',
            options: {
                zoom: 7,
                mapTypeId: window.google.maps.MapTypeId.TERRAIN,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: window.google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                scrollwheel: true,
                streetViewControl: true
            }
        },
        {
            action: 'addMarkers',
            markers: markers,
            marker: {
                options: {
                    draggable: false
                },
                events: {
                    mouseover: function (marker, event, data) {
                        var map = $(this).gmap3('get'),
                        infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
                        if (infowindow) {
                            infowindow.open(map, marker);
                            infowindow.setContent(data);
                        } else {
                            $(this).gmap3({ action: 'addinfowindow', anchor: marker, options: { content: data} });
                        }
                    },
                    mouseout: function () {
                        var infowindow = $(this).gmap3({ action: 'get', name: 'infowindow' });
                        if (infowindow) {
                            infowindow.close();
                        }
                    }
                }
            }
        },
        {
            action: "autofit"
        }
        @foreach (var line in Model.Connection.MapLines)
        {
            <text>
            ,
                {
                action: 'addPolyline',
                    options: {
                        strokeColor: "#FF0000",
                        strokeOpacity: 1.0,
                        strokeWeight: 2
                    },
                    path: [
                                @foreach (var pathPoint in line.path)
                                {
                                    <text>
                                        [@(pathPoint.lat), @(pathPoint.lng)]
                                        @if (pathPoint != line.path.Last())
                                        {
                                            <text>,</text>
                                        }
                                    </text>
                                }
                    ] 
            }
            </text>
        }
    );
        
    $('input', stationsLegend).change(function() {
        var region = $('label[for=' + $(this).attr('id') + ']', stationsLegend).html();
        var checked = $(this).is(':checked');
        var map = $('#map').gmap3('get');
        var markersStations = $('#map').gmap3({
            action: 'get',
            name: 'marker',
            all: true,
            tag: region
        });
        $.each(markersStations, function(j, marker){
            marker.setMap( checked ? map : null);
        });
    });
        
    $('input', trainsLegend).change(function() {
        var region = $('label[for=' + $(this).attr('id') + ']', trainsLegend).html();
        var checked = $(this).is(':checked');
        var map = $('#map').gmap3('get');
        var trainsStations = $('#map').gmap3({
            action: 'get',
            name: 'polyline',
            all: true,
            tag: region
        });
        $.each(trainsStations, function(j, marker){
            marker.setMap( checked ? map : null);
        });
    });
    }